<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
            background: gray;
        }
        .s{
            margin:100px auto;
            perspective: 1400px;
        }
        .x{
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: rotatex(-30deg);
            -moz-transform: rotatex(-30deg);
            -ms-transform: rotatex(-30deg);
            -o-transform: rotatex(-30deg);
            transform: rotatex(-30deg);
        }
        .y{
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: rotateY(15deg);
            -moz-transform: rotateY(15deg);
            -ms-transform: rotateY(15deg);
            -o-transform: rotateY(15deg);
            transform: rotateY(15deg);
        }
        .y div{
            position: absolute;
            width: 235px;
            height: 235px;
            left: 300px;
            opacity: 0.7;
            border-radius: 15px;
            -webkit-transition: all 3s linear;
            -moz-transition: all 3s linear;
            -ms-transition: all 3s linear;
            -o-transition: all 3s linear;
            transition: all 3s linear;
        }
        .img1{
            -webkit-transform: rotateY(0deg) translateZ(200px);
            transform: rotateY(0deg) translateZ(200px);
        }
        .img2{
            -webkit-transform: rotateY(60deg) translateZ(200px);
            transform: rotateY(60deg) translateZ(200px);
        }
        .img3{
            -webkit-transform: rotateY(120deg) translateZ(200px);
            transform: rotateY(120deg) translateZ(200px);
        }
        .img4{
            -webkit-transform: rotateY(180deg) translateZ(200px);
            transform: rotateY(180deg) translateZ(200px);
        }
        .img5{
            -webkit-transform: rotateY(240deg) translateZ(200px);
            transform: rotateY(240deg) translateZ(200px);
        }
        .img6{
            -webkit-transform: rotateY(300deg) translateZ(200px);
            transform: rotateY(300deg) translateZ(200px);
        }
        .y img {
            height:235px;
            width:235px;
            border-radius: 15px;
            transition:all .3s linear;
        }

        .y div:hover {
            opacity: 1;
        }
        .y div:hover  img{
            height:335px;
            width:335px;
            margin-left:-50px;
            margin-top:-50px;
        }
    </style>
</head>
<body>
    <div class="s">
        <div class="x">
            <div class="y">
                <div class="img1">
                    <img src="img/1.jpg">
                </div>
                <div class="img2">
                    <img src="img/2.jpg">
                </div>
                <div class="img3">
                    <img src="img/3.jpg">
                </div>
                <div class="img4">
                    <img src="img/4.jpg">
                </div>
                <div class="img5">
                    <img src="img/5.jpg">
                </div>
                <div class="img6">
                    <img src="img/6.jpg">
                </div>
            </div>
        </div>
    </div>
</body>
</html>